<template>
  <div>
    <a-modal
        :destroyOnClose="true"
        :visible="this.popupVisible"
        :title="this.popupTitle"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
            label="插件类型"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              v-decorator="['plugin',{
                rules: [{ required: true, message: '请选择事件时间类型！' }],
                initialValue: 'test'
              }]"
              style="width: 80%"
          >
            <a-select-option value="test">
              测试插件
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="目标字段名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['label', {
                                rules: [{ required: true, message: '请输入目标字段名！' }],
                                initialValue: this.editData && this.editData.label
                            }]"
              allowClear
              placeholder="input search text"
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="原始字段名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              mode="multiple"
              style="width: 80%"
              placeholder="Please select"
              v-decorator="['sourceField', {
                                rules: [{ required: true, message: '请输入原始字段名！' }],
                                initialValue: this.editData ? convertField(this.editData.sourceField):undefined
                            }]"
          >
            <a-select-option v-for="item in this.tableData" :key="item.objectId">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'
import {find, join} from 'lodash'

export default {
  name: "PretreatmentPopup",
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  computed: {
    ...mapState('pretreatment', ['popupVisible', 'popupTitle', 'editData']),
    ...mapState('fieldManage', ['tableData'])
  },
  methods: {
    ...mapActions('pretreatment', ['addPreItem', 'queryAllPreItem', 'update']),
    ...mapMutations('pretreatment', ['setState']),
    convertField(key) {
      let temp = []
      let data = [...key.split(',')]
      data.map((index) => {
        temp.push(find(this.tableData, {fieldName: index}).objectId)
      })
      return temp
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let {sourceField} = values
          let sourceLabel = []
          let sourceField2 = []
          sourceField.map((index) => {
            let obj = find(this.tableData, {objectId: index})
            sourceLabel.push(obj.label)
            sourceField2.push(obj.fieldName)
          })
          values = {...values, sourceLabel: join(sourceLabel, ','), sourceField: join(sourceField2, ',')}
          if (this.popupTitle == '添加') {
            this.addPreItem(values).then(() => {
              this.queryAllPreItem()
            })
          } else {
            this.update(values).then(() => {
              this.queryAllPreItem()
            })
          }
          this.setState({name: 'popupVisible', value: false})
        }
      })
    },
    handleCancel() {
      this.setState({name: 'popupVisible', value: false})
    }
  }
}
</script>

<style scoped>

</style>
